<template>
  <div class="confirm-dialog">
    <div class="dialog-overlay" @click.self="close">
      <div class="dialog-container">
        <div class="dialog-header" v-if="title">
          <h3>{{ title }}</h3>
        </div>

        <div class="dialog-body">
          <div class="message-icon" :class="iconType">
            <i class="fas" :class="iconClass"></i>
          </div>
          <div class="message-content">
            {{ message }}
          </div>
        </div>

        <div class="dialog-footer">
          <button
              class="btn btn-cancel"
              @click="cancel"
              v-if="showCancel"
          >
            {{ cancelText }}
          </button>
          <button
              class="btn btn-confirm"
              @click="confirm"
              :class="buttonType"
          >
            {{ confirmText }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConfirmDialog',
  props: {
    title: {
      type: String,
      default: '确认操作'
    },
    message: {
      type: String,
      required: true
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'warning',
      validator: (value) => ['warning', 'info', 'success', 'danger', 'question'].includes(value)
    }
  },
  computed: {
    iconClass() {
      const icons = {
        warning: 'fa-exclamation-triangle',
        info: 'fa-info-circle',
        success: 'fa-check-circle',
        danger: 'fa-times-circle',
        question: 'fa-question-circle'
      };
      return icons[this.type];
    },
    iconType() {
      return `icon-${this.type}`;
    },
    buttonType() {
      return `btn-${this.type}`;
    }
  },
  methods: {
    close() {
      this.$emit('close');
    },
    confirm() {
      this.$emit('confirm');
      this.close();
    },
    cancel() {
      this.$emit('cancel');
      this.close();
    }
  }
}
</script>

<style lang="less" scoped>
// 颜色变量
@primary: #4361EE;
@primary-light: #A5B4FC;
@primary-lighter: #E0E7FF;
@secondary: #3A0CA3;
@success: #10B981;
@warning: #F59E0B;
@danger: #EF4444;
@gray-100: #F3F4F6;
@gray-200: #E5E7EB;
@gray-300: #D1D5DB;
@gray-400: #9CA3AF;
@gray-500: #6B7280;
@gray-600: #4B5563;
@gray-700: #374151;
@gray-800: #1F2937;
@gray-900: #111827;

// 阴影
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
@shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
@shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

// 圆角
@radius-sm: 4px;
@radius-md: 6px;
@radius-lg: 8px;
@radius-xl: 10px;

// 过渡
@transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.confirm-dialog {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  .dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
  }

  .dialog-container {
    width: 95%;
    max-width: 420px;
    background-color: white;
    border-radius: @radius-xl;
    box-shadow: @shadow-2xl;
    overflow: hidden;
    transform: translateY(10px);
    opacity: 0;
    animation: dialogEnter 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  }

  .dialog-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid @gray-200;
    background-color: @gray-100;

    h3 {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 600;
      color: @gray-800;
      text-align: center;
    }
  }

  .dialog-body {
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    .message-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      font-size: 1.75rem;
      color: white;
      background: linear-gradient(135deg, var(--icon-color) 0%, var(--icon-color-dark) 100%);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      /* 确保Font Awesome图标正确显示 */
      .fas {
        /* 修正图标位置 */
        line-height: 1;
        /* 确保图标在圆形背景中居中 */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }

      &.icon-warning {
        --icon-color: #F59E0B;
        --icon-color-dark: #D97706;
      }
      &.icon-info {
        --icon-color: #3B82F6;
        --icon-color-dark: #2563EB;
      }
      &.icon-success {
        --icon-color: #10B981;
        --icon-color-dark: #059669;
      }
      &.icon-danger {
        --icon-color: #EF4444;
        --icon-color-dark: #DC2626;
      }
      &.icon-question {
        --icon-color: #8B5CF6;
        --icon-color-dark: #7C3AED;
      }
    }

    .message-content {
      color: @gray-700;
      font-size: 0.95rem;
      line-height: 1.6;
      max-width: 90%;
    }
  }

  .dialog-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid @gray-200;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: @gray-100;

    .btn {
      padding: 0.5rem 1.25rem;
      border-radius: @radius-md;
      font-weight: 500;
      cursor: pointer;
      transition: @transition;
      border: none;
      font-size: 0.9rem;
      min-width: 80px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      &:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
      }

      &.btn-cancel {
        background-color: white;
        color: @gray-700;
        border: 1px solid @gray-300;

        &:hover {
          background-color: @gray-100;
        }

        &:active {
          background-color: @gray-200;
        }
      }

      &.btn-confirm {
        background: @primary;
        color: white;
        box-shadow: @shadow-sm;

        &:hover {
          background: darken(@primary, 5%);
        }

        &:active {
          background: darken(@primary, 10%);
        }

        &.btn-warning {
          background: @warning;

          &:hover {
            background: darken(@warning, 5%);
          }
        }

        &.btn-info {
          background: @primary-light;

          &:hover {
            background: darken(@primary-light, 5%);
          }
        }

        &.btn-success {
          background: @success;

          &:hover {
            background: darken(@success, 5%);
          }
        }

        &.btn-danger {
          background: @danger;

          &:hover {
            background: darken(@danger, 5%);
          }
        }

        &.btn-question {
          background: @primary;

          &:hover {
            background: darken(@primary, 5%);
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dialogEnter {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .confirm-dialog {
    .dialog-container {
      width: 95%;
      max-width: 95%;
    }

    .dialog-header h3 {
      font-size: 1.1rem;
    }

    .dialog-body {
      padding: 1.5rem 1rem;

      .message-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
      }

      .message-content {
        font-size: 0.9rem;
      }
    }

    .dialog-footer {
      flex-direction: row;
      justify-content: space-between;
      gap: 0.5rem;

      .btn {
        flex: 1;
        min-width: auto;
        font-size: 0.85rem;
        padding: 0.5rem;
      }
    }
  }
}
</style>